<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>监视属性_天气案例02</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

	<!-- 
		监视属性watch:
			1.当被监视的属性变化时，回调函数自动调用，进行相关操作
			2.监视的属性必须存在，才能进行监视!!
			3.监视的两种写法:
			(1).new·vue时传入&watch配置
			(2).通过vm.$watch监视
	-->
	<div id="root">
		<h1>今天天气很很{{factTemperture}}</h1>
		<button name="切换" @click="changeWeather">切换</button>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = true
	//创建Vue实例
	const vm = new Vue({
		el:'#root',      
		data:{
			isHot:true
		}, //data中的数据可以通过函数来获取
		methods:{
			changeWeather(){
				this.isHot = !this.isHot
			}
		},
		computed:{
			factTemperture(){
				return this.isHot ? '炎热' : '寒冷'
			}
		},
		watch:{
			factTemperture:{
				immediate:true, //初始化加载一下监视函数
				handler(oldvalue,newvalue){
					console.log("@@@",oldvalue,newvalue);
				}
			}
		},
		// 无论是计算属性还是data属性 都可以被监视 
		// isHot:{
		// 	factTemperture:{
		// 		handler(oldvalue,newvalue){
		// 			console.log("@@@",oldvalue,newvalue);
		// 		}
		// 	}
		// }
	})

	// vm.$watch('factTemperture',{
	// 	immediate:true, //初始化加载一下监视函数
	// 	handler(oldvalue,newvalue){
	// 		console.log("@@@",oldvalue,newvalue);
	// 	}
	// })
</script>
</html>